<template>
    <div>
        <h1>我是爸爸</h1>
        <!-- 父传子第一步：在引入的子组件标签中，使用v-bind(:)绑定一个自定义属性 -->

        <!-- 
            子传父第二步：通过v-on(@)绑定自定义事件(事件名和this.$emit中的对应起来) 等号右边的方法会默认接收一个参数,这个参数就是子组件传过来的值
        -->
            <!-- 访问子组件中的方法：通过ref的方式，1.给子组件标签用ref起个名 -->
        <best-son :father-gift="gift" :father-money="money" :father-sister="sister" @sonGift="handle"c @two="handle2" ref="son"></best-son>
        <h1>儿子给的---{{ sonMsg }}-----{{ sonMsg2 }}</h1>
        <button @click="fu">调用子组件的change方法</button>
    </div>
</template>

<script>
    // 1.
    import bestSon from "./son.vue"
    export default {
        components:{
            bestSon
        },
        data(){
            return {
                gift:"七匹狼",
                money: 1 ,
                sister: "姐姐",
                sonMsg: "",
                sonMsg2:""
            }
        },
        methods:{
            // val就是子组件穿过来的值
            handle(val){
                console.log(val,"子组件的数据")
                this.sonMsg = val
            },
             handle2(val){
                console.log(val,"子组件的数据")
                this.sonMsg2 = val
            },
            fu(){
                console.log(this.$refs.son)//里面有子组件的数据及方法
                //通过 this.$refs.son.方法名()调用
                this.$refs.son.change()
            }
        }
    }
</script>

<style lang="scss" scoped>

</style>